<template>
  <div class="page" id="app">
    <div class="body">
      <div class="block" v-for="(img, index) in bgImg" :key="img.id">
        <div v-if="index === 0" class="coming-txt" v-cloak>
          <div class="swiper-container" id="top-msg">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="item in comingTxt" :key="item.id">
                <p class="p-msg" v-html="decodeData(item)"></p>
              </div>
            </div>
          </div>
        </div>
        <div v-if="index === 2" class="have-join-num">
          <img class="img-have" :src="imgHave" alt>
          <div class="have-join" v-cloak>
            {{ havePeople }}
            <img class="img-people" :src="imgPeople" alt>
          </div>
          <img class="img-join" :src="imgJoin" alt>
        </div>
        <div v-if="index === 3" class="bag">
          <div class="swiper-container" id="gift-bag">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="item in giftBags" :key="item.id">
                <div class="gift-box">
                  <img class="img-bag" :src="item.img" @click.stop.prevent>
                  <div class="btn-get">
                    <button
                      type="button"
                      class="btn-get-gift"
                      @click.prevent="getGift(item, $event)"
                      :data-id="item.id"
                      :data-name="item.name"
                      :class="{haveGetGift: item.is_own == 1}"
                      :disabled="item.is_own == 1"
                      v-html="item.is_own ? '已领取' : '领取'"
                    ></button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
        <div v-if="index === 4" class="joy-msg">
          <div class="swiper-contationer" id="joy-msg">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                v-for="(item, index) in joyTxt"
                :key="item.id"
                v-if="index % 3 === 0"
              >
                <p class="p-msg" v-html="joyTxt[index]"></p>
                <p class="p-msg" v-if="index < joyTxt.length" v-html="joyTxt[index+1]"></p>
                <p class="p-msg" v-if="index < joyTxt.length" v-html="joyTxt[index+2]"></p>
              </div>
            </div>
          </div>
        </div>
        <div v-if="index === 4" class="btn-consult-box">
          <button type="button" class="btn-consult" @click.prevent="consult">护肤咨询</button>
        </div>
        <img class="bgimg" :src="img" @click.stop.prevent>
      </div>
    </div>
    <!-- 礼包弹框 start -->
    <div
      v-if="showDialogGift"
      class="dialog-gift"
      ref="dialogGift"
      @touchmove.stop.prevent
      @whell.stop.prevent
    >
      <div class="bg-dialog" @click.prevent="closeDialog"></div>
      <div class="dialog-box">
        <img :src="imgDialogGift" alt>
        <p class="dialog-tips" v-html="giftTips"></p>
        <a href="javascript:;" @click.prevent="closeDialog"></a>
      </div>
    </div>
    <!-- 礼包弹框 end -->
    <!-- 咨询弹框 start -->
    <div v-if="dialogConsult" class="dialog-gift" @touchmove.stop.prevent @whell.stop.prevent>
      <div class="bg-dialog" @click.prevent="closeDialog"></div>
      <div class="dialog-box dialog-content">
        <img :src="imgConsult">
        <a class="close" href="javascript:;" @click.prevent="closeDialog"></a>
      </div>
    </div>
  </div>
</template>
<script>
  // window.onload = function() {
  // rem响应
  // document.documentElement.style.fontSize = (document.documentElement.clientWidth / 750) * 16 + 'px'
  // 背景图片
  // var bgImg = [
  //   './img/relay_beautify_01.jpg',
  //   './img/relay_beautify_02.jpg',
  //   './img/relay_beautify_03.jpg',
  //   './img/relay_beautify_04.jpg',
  //   './img/relay_beautify_05.jpg'
  // ]
  var comingTxt = [];
  var comingTxt = ["恭喜殷紫萍\ud83d\udc95接力成功！加入变美之旅"];
  // var imgHave = './img/txt_have.png'
  // var imgPeople = './img/txt_people.png'
  // var imgJoin = './img/txt_join.png'
  // var imgGiftBag = './img/gift.png'
  // var giftBags = [
  //   './img/giftA.png',
  //   './img/giftB.png',
  //   './img/giftC.png'
  // ]
  var joyTxt = [];
  var joyTxt = [
    '<span class="joy">恭喜</span><span class="joy-name">殷紫萍\ud83d\udc95</span><span class="joy-gift">已领取变美礼包A</span>'
  ];
  // 领取礼包弹框，有字
  // var imgDialogGift =
  //   'http://sucai.suoluomei.cn/sucai_zs/images/20181130/8a1d66b103ff36fb81e9eb194fc227fd.png'
  // 领取礼包弹框，无字
  var imgDialogGift =
    "http://sucai.suoluomei.cn/sucai_zs/images/20181130/c56e160d40708d83a9a01cd7ba67a33d.png";
  var bgImg = [
    "http://sucai.suoluomei.cn/sucai_zs/images/20181129/d175656fe56731ee22f28c8a8a4d17bf.jpg?x-oss-process=image/quality,Q_70",
    "http://sucai.suoluomei.cn/sucai_zs/images/20181129/ec3dc222d6bde64a7f2273560f3c4abd.jpg?x-oss-process=image/quality,Q_70",
    "http://sucai.suoluomei.cn/sucai_zs/images/20181129/9a933e8b467a90e4420e6c8540ae7eab.jpg?x-oss-process=image/quality,Q_70",
    "http://sucai.suoluomei.cn/sucai_zs/images/20181129/05a87bf369ddb581506ade89ed34704c.jpg?x-oss-process=image/quality,Q_70",
    "http://sucai.suoluomei.cn/sucai_zs/images/20181129/d28c7cf6fd4ad7350c3981ef50195a61.jpg?x-oss-process=image/quality,Q_70"
  ];
  var imgHave =
    "http://sucai.suoluomei.cn/sucai_zs/images/20181130/a574edabcee76917b8b37ba810b5e94e.png?x-oss-process=image/quality,Q_70";
  var imgPeople =
    "http://sucai.suoluomei.cn/sucai_zs/images/20181130/448a582966dcc666597b08d727ef5ea1.png?x-oss-process=image/quality,Q_70";
  var imgJoin =
    "http://sucai.suoluomei.cn/sucai_zs/images/20181130/9060f0e555f53c334f43b0f56da02f88.png?x-oss-process=image/quality,Q_70";
  var imgGiftBag =
    "http://sucai.suoluomei.cn/sucai_zs/images/20181130/7facabc1bf668331b2af391bb450b133.png?x-oss-process=image/quality,Q_70";
  var giftBags = [
    {
      img:
        "http://sucai.suoluomei.cn/sucai_zs/images/20181201/9ed6e88b842b6e99c12fccddb9ebbd7f.png?x-oss-process=image/quality,Q_70"
    },
    {
      img:
        "http://sucai.suoluomei.cn/sucai_zs/images/20181201/f61294f33e2abd786c36ac0f5fd55fa5.png?x-oss-process=image/quality,Q_70"
    },
    {
      img:
        "http://sucai.suoluomei.cn/sucai_zs/images/20181201/0178ceb15b6f5c906ee5f573853ce8eb.png?x-oss-process=image/quality,Q_70"
    }
  ];

  var giftTips = "赶快去找你的专属美肤老师<span></span>咨询吧~";
  var giftTipsNew = "快去公众号输入“变美”咨询护肤老师吧~";
  // 禾葡兰公众号（和你一起变美）二维码
  var imgConsult =
    "http://sucai.suoluomei.cn/sucai_zs/images/20181201/70ae51fe17ba7ffb4b97a62ff1608ae3.png?x-oss-process=image/quality,Q_70";

  var baseApi = "Zmhf/index";
  var apiList = {
    getInitGift: "getInitGift",
    setUserGift: "setUserGift",
    getLogList: "getLogList"
  };
  // };
  import "swiper/dist/css/swiper.min.css";
  // import "weui";
  import http from "../utils/http";
  import Swiper from "swiper/dist/js/swiper.min.js";
  import weui from "weui.js";
  export default {
    name: "gift",
    data() {
      return {
        bgImg: bgImg,
        comingTxt,
        imgHave,
        imgPeople,
        imgJoin,
        havePeople: 3247,
        imgGiftBag,
        giftBags,
        joyTxt,
        imgDialogGift,
        showDialogGift: false,
        haveTeacher: false,
        hplTeacher: "",
        giftTips,
        haveGetGiftClass: "haveGetGift",
        dialogConsult: false,
        imgConsult,
        clickSwitchClass: "",
        ossCompress: "?x-oss-process=image/quality,Q_70",
        testField: "",
        plusOneJoin: false,
        secretKey: "be15d4ca913c91494cb4f9cd6ce317c6",
        sign: ""
      };
    },
    filters: {
      jsonDecode(data) {
        if (typeof data === "string") {
          return JSON.parse('"' + data + '"');
        }
      }
    },
    created() {
      var _this = this;
      _this.sign = location.href.match(/sign\/(.*)#/i)
        ? location.href.match(/sign\/(.*)#/i)[1]
        : "";
      console.log("sign", _this.sign);

      // 初始或领取礼包数据
      http
        .post(baseApi, {
          sign: _this.sign,
          key: _this.secretKey,
          type: apiList.getInitGift
        })
        .then(resp => {
          console.log("​created -> resp", resp);
          if (resp && resp.errcode == 0 && resp.data) {
            var giftList = resp.data.giftList;
            if (giftList) {
              for (var i in giftList) {
                Object.assign(_this.giftBags[i - 1], giftList[i]);
              }
              _this.$nextTick(function() {});
            }
            // 参加人数
            _this.havePeople = resp.data.totalNum || _this.havePeople;
            // 测试unicode昵称
            console.log(resp.data.sepcial);
            if (resp.data.sepcial) {
              _this.testField = resp.data.sepcial;
              console.log(_this.testField);
            }
          }
        });
      // 轮播数据
      http
        .post(baseApi, {
          sign: _this.sign,
          type: apiList.getLogList,
          key: _this.secretKey
        })
        .then((resp, textStatus) => {
          console.log(resp);
          console.log(textStatus);
          var logList = resp.data.logList;
          if (logList) {
            _this.comingTxt.length = 0;
            _this.joyTxt.length = 0;
            logList.forEach(function(item, i) {
              var nickname = item.nickname;
              var giftName = item.gift_name;
              _this.comingTxt.push("恭喜" + nickname + "接力成功！加入变美之旅");
              _this.joyTxt.push(
                '<span class="joy" style="-webkit-box-flex: 2; -ms-flex: 2; flex: 2; white-space: nowrap;">恭喜</span><span class="joy-name" style="-webkit-box-flex: 3; -ms-flex: 3; flex: 3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">' +
                  _this.decodeData(nickname) +
                  '</span><span class="joy-gift" style="-webkit-box-flex: 6; -ms-flex: 6; flex: 6; text-align: right;">已领取' +
                  giftName +
                  "</span>"
              );
            });
            _this.$nextTick(function() {
              _this.comingTxtSwiper();
            });
            _this.$nextTick(function() {
              _this.joySwiper();
            });
          }
        });
    },

    methods: {
      comingTxtSwiper() {
        var comingSwiper = new Swiper("#top-msg", {
          // autoHeight: true,
          loop: true,
          autoplay: true,
          delay: 3500
        });
      },
      giftBagSwiper() {
        var giftSwiper = new Swiper("#gift-bag", {
          // autoHeight: true,
          // autoplay: true,
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev"
          }
        });
      },
      joySwiper() {
        var joyMsgSwiper = new Swiper("#joy-msg", {
          direction: "vertical",
          // autoHeight: true,
          autoplay: true,
          delay: 5000,
          on: {
            init: function() {}
          }
        });
      },
      getGift(bag, $event) {
        var _this = this;
        if (bag) {
          http
            .post(baseApi, {
              key: _this.secretKey,
              type: apiList.setUserGift,
              sign: _this.sign,
              data: {
                gift_id: bag.id,
                gift_name: bag.name
              }
            })
            .then(resp => {
              console.log("​getGift -> resp", resp);
              if (resp && resp.errcode == 0) {
                _this.showDialogGift = true;
                if (_this.haveTeacher) {
                  _this.giftTips =
                    "赶快去找你的专属美肤老师<span>" +
                    _this.hplTeacher +
                    "</span>咨询吧~";
                } else {
                  _this.giftTips = giftTipsNew;
                }
                console.log($event);
                // 点击领取后按钮改变颜色，1=已领取，0=未领取
                bag.is_own = 1;
                console.log(_this.clickSwitchClass);
                // _this.$nextTick()
              } else {
                weui.alert(resp.msg);
                console.log(resp);
              }
            });
        }
      },
      dialogGift() {
        this.showDialogGift = true;
      },
      closeDialog() {
        this.showDialogGift = false;
        this.dialogConsult = false;
      },
      consult() {
        this.dialogConsult = true;
      },
      decodeData(data) {
        if (typeof data === "string") {
          return JSON.parse('"' + data + '"');
        }
      }
    },
    mounted() {
      console.log(this.comingTxt);
      this.giftBagSwiper();
    }
  };
</script>
<style lang="less" scoped>
  * {
    padding: 0;
    margin: 0;
  }

  img {
    border: 0;
    outline: 0;
    vertical-align: middle;
  }

  .page {}

  .block {
    width: 100%;
    min-width: 20rem;
    max-width: 46.875rem;
    margin: 0 auto;
    position: relative;
  }

  .block .bgimg {
    width: 100%;
  }

  .coming-txt {
    position: absolute;
    width: 100%;
    top: 90%;
    height: 2.25rem;
    overflow: hidden;
    z-index: 9;
    text-align: center;
    background-color: rgba(235, 203, 207, 0.6);
  }

  #top-msg {
    width: 100%;
    height: 100%;
  }

  #top-msg .swiper-slide {
    width: 100%;
    height: 100%;
  }

  #top-msg .p-msg {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #af011d;
    font-size: 1.025rem;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .have-join-num {
    position: absolute;
    top: 31%;
    width: 100%;
    text-align: center;
    z-index: 9;
  }

  .have-join-num .img-have {
    width: 5rem;
  }

  .have-join-num .img-people {
    width: 2rem;
  }

  .have-join-num .img-join {
    width: 10rem;
  }

  .have-join-num .have-join {
    font-size: 30px;
    color: #fff;
  }

  .bag {
    position: absolute;
    width: 100%;
    top: -22%;
    z-index: 9;
  }

  .bag .gift-box {
    padding: 0 6.6%;
  }

  .bag .img-bag {
    width: 100%;
  }

  .bag .swiper-button-prev,
  .swiper-container-rtl .swiper-button-next {
    background-image: url(http://sucai.suoluomei.cn/sucai_zs/images/20181130/508d4ced086aff24ec70ffed162aa5b4.png);
  }

  .bag .swiper-button-next,
  .swiper-container-rtl .swiper-button-prev {
    background-image: url(http://sucai.suoluomei.cn/sucai_zs/images/20181130/3e575726862abf4b2d4f173c69ab43c5.png);
  }

  .joy-msg {
    position: absolute;
    top: -22%;
    width: 100%;
    height: 37.6%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 12.6%;
    overflow: hidden;
    z-index: 9;
  }

  .joy-msg .p-msg {
    height: 2.33rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .joy-msg p {
    color: #fff;
    font-size: 16px;
  }

  .joy-msg p .joy {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2;
    white-space: nowrap;
  }

  .joy-msg p .joy-name {
    -webkit-box-flex: 3;
    -ms-flex: 3;
    flex: 3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .joy-msg p .joy-gift {
    -webkit-box-flex: 6;
    -ms-flex: 6;
    flex: 6;
    text-align: right;
  }

  .btn-get {
    position: absolute;
    width: 100%;
    z-index: 11;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
  }

  .gift-box .btn-get-gift {
    width: 6.8875rem;
    height: 1.625rem;
    outline: 0;
    border: 0;
    background-color: #ffa734;
    color: #fff;
    border-radius: 1.625rem;
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.5rem;
  }

  .dialog-gift {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 22;
    width: 100%;
  }

  .dialog-gift .bg-dialog {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 20;
  }

  .dialog-gift .close {
    width: 4rem;
    height: 2rem;
    position: absolute;
    top: 30%;
    left: 73%;
    border-radius: inherit;
    @media screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
      width: 3rem;
      top: 34%;
      left: 73%;
    }
  }

  .dialog-box {
    position: relative;
    width: 100vw;
    height: 100vh;
  }

  .dialog-box .dialog-tips {
    position: absolute;
    top: 57%;
    z-index: 26;
    font-size: 0.7rem;
    color: #b98531;
    width: 100%;
    text-align: center;
  }

  .dialog-gift img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    z-index: 23;
    left: 0;
    right: 0;
    margin: auto;
  }

  .dialog-gift a {
    width: 4rem;
    height: 4rem;
    display: inline-block;
    position: absolute;
    bottom: 10.9%;
    left: 41.5%;
    z-index: 24;
    border-radius: 4rem;
    @media screen and (device-width: 375px) and (device-height: 812px) and (-webkit-pixel-ratio: 3) {
/*      width: 5.2rem;
      height: 5.2rem;
      border-radius: 5.2rem;
      bottom: 16.8%;
      left: 44%;*/
      bottom: 15.3%;
      left: 41.5%;
    }
  }

  [v-cloak] {
    display: none;
  }

  .gift-box .haveGetGift {
    background-color: #a9a9a9;
  }

  .btn-consult-box {
    position: absolute;
    bottom: 59%;
    z-index: 9;
    width: 100%;
    text-align: center;
  }

  .btn-consult-box .btn-consult {
    width: 9.8875rem;
    height: 2.325rem;
    line-height: 2.325rem;
    outline: 0;
    border: 0;
    background-color: #ffa734;
    color: #fff;
    border-radius: 2.625rem;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.5rem;
  }

  .dialog-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .dialog-content img {
    position: absolute;
    z-index: 22;
    width: 80%;
  }

  /* iphoneX 媒体查询响应 */
</style>
